<template>
    <div class="pages absolute t0 borderbox">
        <div class="flex flexSpaceB address" v-if="!!details.address">
            <div class="flex col textL pt5 pl15 w100">
                <h2 class="fs16 bold">{{details.contact || ' '}}</h2>
                <span class="garyColor fs14 lh16 mt4 mb4">收获地址：{{(details.address || ' ')}}</span>
                <span class="garyColor fs14 lh16">联系电话：{{details.phone}}</span>
            </div>
            <div>&nbsp;</div>
        </div>
        <div class="section flex col">
            <div class="flex flexAlignCenter pb10 pt10 vux-1px-b" style="height:7.5rem;"
                 v-for="(item,index) in details.detailsList" :key="index"
            >
                <img :src="item.productImg" class="secImg" alt="">
                <div class="secDetail flex col textL pl10">
                    <p class="bold">{{(item.productName || ' ') | sliceString(20)}}</p>
                    <span class="garyColor">数量：{{item.buyNumber}}</span>
                    <span class="price bold">￥ {{item.salePrice}} </span>
                </div>
            </div>
            <div class="flex row flexSpaceB vux-1px-b h40">
                <span class="garyColor">订单编号:{{details.orderNo}}</span>
                <span class="clone" @click="clone" v-clipboard:copy="details.orderNo">复制</span>
            </div>
            <div class="flex row flexSpaceB vux-1px-b h40">
                <span class="garyColor">兑换时间: {{details.orderDate}}</span>
                <span>&nbsp;</span>
            </div>
            <div class="flex row flexSpaceB vux-1px-b h40">
                <span class="garyColor" v-if="details.payType == '01'">支付方式: 微信支付</span>
                <span class="garyColor" v-if="details.payType == '02'">支付方式: 芸券支付</span>
                <span class="garyColor" v-if="details.payType == '03'">支付方式: 兴业银行支付</span>
                <span class="garyColor" v-if="details.payType == '04'">支付方式: 汇卡宝支付</span>
                <span>&nbsp;</span>
            </div>
            <div class="flex row flexSpaceB vux-1px-b h40">
                <span class="garyColor">总金额</span>
                <span class="bold">{{details.orderAmt}}元</span>
            </div>
            <div class="flex row flexSpaceB vux-1px-b h40">
                <span class="garyColor">运费</span>
                <span class="bold">{{details.orderFreight}}元</span>
            </div>
            <div class="flex row flexSpaceB vux-1px-b h40">
                <span class="garyColor">优惠金额</span>
                <span class="bold">{{details.totalVouchersAmount}}元</span>
            </div>
            <div class="flex row flexSpaceB vux-1px-b h40">
                <span class="garyColor">实付款: </span>
                <span class="bold price">{{details.payAmount}} 元</span>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import {queryOrderDetails} from "src/methods/request.js";
import {formats} from "src/methods/synchronous.js";
export default {
    name:'orderMoneyDetail',
    data(){
        return {
            details:{
                detailsList:[]
            }
        }
    },
    computed:{
        imgUrl(){
            return this.$store._modules.root._children.a.state
        }
    },
    created(){
        this.getdetail();
    },
    methods:{
        //获取详细信息
        getdetail(){
            this.$vux.loading.show({text: 'Loading'})
            let routeparams = this.$route.query.orderNo;
            queryOrderDetails({orderNo:routeparams}).then(res=>{
                console.log(res)
                this.$vux.loading.hide();
                if(res.rspCode == '0000' && res.data.code == '0000'){
                    this.details = Object.assign({}, res.data.orderDetailsList[0]);
                    this.details.orderDate = formats( this.details.orderDate)
                    this.details.detailsList.forEach(item=>{
                        item.productImg = this.imgUrl + item.productImg;
                    })
                }
            }).catch(err=> this.$vux.loading.hide())
        },
        clone(){
            Toast({message:"复制成功",position:'middle',duration:2000});
        }
    }
}
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
